<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>照片</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
			
		}
		#datubiankuang{
			margin-top:20px;
			text-align: center;
		}
		#datu{
			
			/*border:1px solid red;*/
			display:inline-block;
		}
		#waiwaibiankuang{
			position: relative;
			border:1px solid green;
			height:100px;
			width:1000px;
			margin:20px auto;
		}
	#waibiankuang{
		width:800px;
		height:100px;
		border:1px solid black;

		overflow: hidden;
		position: absolute;
		top:0;
		left:100px;
	}
	#yinchangkuang{
		height:100px;
		position: absolute;
		
	}
	#qian{
		font-size: 90px;
		cursor: pointer;
	}
	#hou{
		position: absolute;
		top:0;
		left:900px;
		font-size: 90px;
		cursor:pointer;
	}
	</style>

</head>
<body>
	<div id="datubiankuang">
	<div id="datu">
		<img src="../mig/1.jpg" id="datuimg">
		<p>美丽的图片</p>
	</div>
</div>
	<div id="waiwaibiankuang">
	<span id="qian"><</span>

<div id="waibiankuang">
	
	<div id="yinchangkuang" style="left:0px">
		
	</div>
	
</div>
<span id="hou">></span>
</div>
</body>
<script type="text/javascript">
	window.onload=function(){
	var xhr  = new XMLHttpRequest();
	var yinchangkuang = document.getElementById("yinchangkuang"); 
	var datuimg = document.getElementById("datuimg");
	var yinchangkuang = document.getElementById("yinchangkuang");
	var qian = document.getElementById("qian");
	var hou = document.getElementById("hou");
	xhr.open("GET","img.php",true);
	xhr.send();
	xhr.onreadystatechange=function(){
		if(xhr.readyState == 4 &&xhr.status == 200){
			var arr = JSON.parse(xhr.responseText);
			yinchangkuang.style.width=200*(arr.length+1)+"px";
			for(var i=0;i<arr.length;i++){
				var img = document.createElement("img");
				img.src=arr[i].src;
				img.id=i;
				yinchangkuang.append(img);
				document.getElementById(i).setAttribute("index",i);
				document.getElementById(i).onclick = function(){
					var index = this.getAttribute("index");
					datuimg.src = arr[index].datu;
				}
				
			}
			function a(offest){
				var left = parseInt(yinchangkuang.style.left);
				yinchangkuang.style.left = left+offest+"px";
			}
		   qian.onclick=function(){
		   	a(-200);
		   }
		   hou.onclick=function(){
		   	a(200);
		   }
	}}}
</script>
</html>